<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商品</title>



<style type="text/css">
*{
	padding: 0;
	margin: 0;
}
#navi{
	width: 100%;
	height: 100px;
	background-color: #47CBFF;
	border-radius:10px 10px 0 0; 
}
.logo{
	border: 0ch solid;
	max-width: 200px;
	min-width: 200px;
	max-height:100px;
	min-height: 100px;
	float: left;
	margin: 0 0 0 100px;
}
.nav{
	border: 0 solid;
	height: 100px;
	float: left;
}
.nav>strong>ul{
	
	list-style-type: none;
	padding: 0;
	margin: 0;
}
.nav>strong>ul>li{
	display: inline-block;
	font-size: 20px;
	font-family: '黑体';
	margin: 30px 70px;	
	height: 100px;
	border: 0px solid;
	line-height: 40px;
	text-align: center;
	color: #ffffff;
	cursor: pointer;/*手形鼠标指针*/
}
.logo>a>img{
	width: 200px;
	height: 100px;
}
.ol{
	display: none;/*隐藏下拉菜单*/
}
.li:hover ol{
	display: block;
}
a{
	text-decoration: none;
}
.box{
		width:500px;
		height:40px;
		border:2px dashed #52FAFF;
		border-radius: 10px;
		margin:auto;
	}
.input{
		float:left;
		width:400px;
		height:38px;
		outline:none;
		border:none;
		border-radius:10px 0 0 10px;
		background: rgba(255, 255, 255, 0.5);
	}
.button{
	float:left;
	width:100px;
	height:40px;
	color:white;
	background-color:#EBC11F;
	border-radius:0 10px 10px 0;
	border:none;
	outline:none;
}


.l_buoy{
	border: 1px dashed;
	border-radius: 10px;
	width: 200px;
	height: 500px;
	left: 50px;
	position: fixed;
	background-color: #C5F2E9;
}
.l_buoy>ul{
	list-style: none;
}
.l_buoy>ul>li>{
	margin: 10px;
	padding: 20px;
}
.l_buoy>ul>li>a{
	font-size: 35px;
	color: #000000;
}

#banner{
	margin: auto 280px;
}
.content1{
	border:1px dashed;
	border-radius: 20px;
	float: left;
	margin: 5px;
	width: 330px;
	height: 330px;
}
.content2{
	border-radius: 20px 20px 0 0;
	height: 200px;
	background-color: #3EFFDB;
}
.name{
	font-size: 35px;
}
.description{
	font-size: 15px;
}
.r_buoy{
	width: 50px;
	height: 160px;
	border-radius:10px;
	position: fixed;
	right: 250px;
	top:500px;
	background: #99D9EA;
}
.r_buoy>a>img{
	weight: 49px;
	height: 49px;
}
.footer{
	width: 100%;
	height: 100px;
	background-color: #47CBFF;
	border-radius: 0 0 10px 10px;
}
.footer>.footer1>img{
	width: 200px;
	height: 100px;
	float: left;
}
.footer2{
	float: right;
}
</style>
<script type="text/javascript" src="js/vue-2.6.10.js"></script>
<script type="text/javascript" src="js/axios.js"></script>
</head>
	<body style="background-color: #D3E3FF">
	<div id="navi">
		<div class="logo" id="h">
			<a href=" ">
			<img src="images/nav/logo.png" alt="">
			</a >
		</div>
		<nav class="nav">
			<strong>
				<ul class="ul">
					<li class="li">
						首页
					</li>
					<li class="li">
						今日推荐⇩
					<ol class="ol">
						<li>
							<div>
								<img src="images/nav/jrtj.jpg" alt="">
							</div>
						</li>
					</ol>
					</li>
					<li class="li">
						请登录
					</li>
					<li class="li">
						免费注册
					</li>
					<li class="li">
						我的商品
					</li>
					<li class="li">
						我的账户
					</li>
					<li class="li">
						更多⇩
						<ol class="ol">
							<li >
								联系我们
							</li>
						</ol>
					</li>
				</ul>
			</strong>
        </nav>
     </div>
	<div style="height: 1000px;">
			<div class="box">
			<input type="text" class="input" placeholder="请输入商品">
			<input type="button" value="搜索" class="button">
			</div>
	
		<div class="l_buoy">
			<ul>
				<li><a href="">类1</a></li>
				<li><a href="">类2</a></li>
				<li><a href="">类3</a></li>
				<li><a href="">类4</a></li>
				<li><a href="">类5</a></li>
				<li><a href="">类6</a></li>
			</ul>
		</div>
		<div id="banner" >
			<div v-for="c in users" class="content1">
				<div class="content2"></div>
				<a href="" class="name">{{c.name}}</a>￥1<br>
				<a href="" class="description">{{c.descrption}}</a>
			</div>
		</div>
		<script type="text/javascript">
			let vue = new Vue({
				el: '#banner',
				data:{
					users: []
				},
				created(){
					axios.get('/managerSystem/com.do').then(
						function(res_obj){
							vue.users = res_obj.data;
						}
					).catch(
						function(error_obj){
							alert("网络加载异常！！！")
						}		
					)
				}
			})
		</script>
	<div class="r_buoy">
	<a href="#navi" ><img src="images/anniu.png"></a>
	<a href="" ><img src=""></a>
	<a href="" ><img src=""></a>
	</div>
	</div>
	<div class="footer">
			<div class="footer1">
				<img src="images/nav/logo.png" alt="">
			</div>
			<div class="footer2">
				<img src="images/nav/f1.png" alt="">
				<img src="images/nav/f2.png" alt="">
				<img src="images/nav/f3.png" alt="">
				<img src="images/nav/f4.png" alt="">
			</div>
	</div>
</body>
</html>